<script setup>
import BackButton from "@/components/BackButton.vue";
import {ref, getCurrentInstance} from "vue";
const { proxy } = getCurrentInstance()
import { ascTypeDetail } from "@/scripts/api";
import { useRouter } from 'vue-router'
const router = useRouter()
const {typeName, typeCode} = router.currentRoute.value.query
const route = proxy.$route
const { meta, path } = route
meta.title=`${typeName}`
const allType = ref({})
const tableData = new ref([])
const regionTableData = new ref([])
await ascTypeDetail().then(res=>{
  allType.value = res.data
})

tableData.value.unshift({
  type:'总计',
  allNum: allType.value[`${typeCode}All`],
  dayInsertNum: '--',
  dayUpdateNum: '--',
  dayDeleteNum: '--'
})
regionTableData.value.unshift({
  type:'总计',
  allNum: allType.value[`${typeCode}All`],
  dayInsertNum: '--',
  dayUpdateNum: '--',
  dayDeleteNum: '--'
})
const regionTabPrefix = ref('')
const tabName = ref('type')
const typeChange = (row) => {
  regionTabPrefix.value = row.type === '总计' ? '' : row.type;
  tabName.value = "region";
}
</script>

<template>
  <main style="padding: 20px">
    <el-descriptions size="large" :column="2" border>
      <template #title>
        <div style="display: flex;align-items: baseline;">
          <span style="font-size: 26px">{{typeName}}</span>
        </div>
      </template>
      <template #extra>
        <back-button/>
      </template>
      <el-descriptions-item :span="typeCode === 'marketRel'?1:2">
        <template #label>
          <span style="font-size: 20px">总量</span>
        </template>
        <span style="font-size: 20px">{{ tableData[0].allNum }} 条</span>
      </el-descriptions-item>
      <el-descriptions-item v-if="typeCode === 'marketRel'">
        <template #label>
          <span style="font-size: 20px">未对应数量</span>
        </template>
        <span style="font-size: 20px">809084 条</span>
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label>
          <span style="font-size: 20px">更新时间</span>
        </template>
        <span style="font-size: 20px">{{ allType.dateStr }}</span>
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label>
          <span style="font-size: 20px">版本周期</span>
        </template>
        <span style="font-size: 20px">月</span>
      </el-descriptions-item>
    </el-descriptions>
    <el-divider style="margin: 30px 0"/>
    <el-tabs type="border-card" v-model="tabName">
      <el-tab-pane label="性质统计" name="type">
        <el-table style="height: calc( 100vh - 380px)" :data="tableData" size="large" @row-click="typeChange">
          <el-table-column width="150">
            <template #default="scope">
              <span class="header">{{ scope.row.type }}</span>
            </template>
          </el-table-column>
          <el-table-column>
            <template #header>
              <span class="header">总量</span>
            </template>
            <template #default="scope">
              <span class="content">{{ scope.row.allNum }}</span>
            </template>
          </el-table-column>
          <el-table-column>
            <template #header>
              <span class="header">日新增量</span>
            </template>
            <template #default="scope">
              <span class="content">{{ scope.row.dayInsertNum }}</span>
            </template>
          </el-table-column>
          <el-table-column>
            <template #header>
              <span class="header">日修改量</span>
            </template>
            <template #default="scope">
              <span class="content">{{ scope.row.dayUpdateNum }}</span>
            </template>
          </el-table-column>
          <el-table-column>
            <template #header>
              <span class="header">日删除量</span>
            </template>
            <template #default="scope">
              <span class="content">{{ scope.row.dayDeleteNum }}</span>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
      <el-tab-pane name="region">
        <template #label>
          <span style="font-weight: bolder">{{regionTabPrefix}}</span> 区域统计
        </template>
        <el-table style="height: calc( 100vh - 380px)" :data="regionTableData" size="large">
          <el-table-column width="150">
            <template #default="scope">
              <span class="header">{{ scope.row.type }}</span>
            </template>
          </el-table-column>
          <el-table-column>
            <template #header>
              <span class="header">总量</span>
            </template>
            <template #default="scope">
              <span class="content">{{ scope.row.allNum }}</span>
            </template>
          </el-table-column>
          <el-table-column>
            <template #header>
              <span class="header">日新增量</span>
            </template>
            <template #default="scope">
              <span class="content">{{ scope.row.dayInsertNum }}</span>
            </template>
          </el-table-column>
          <el-table-column>
            <template #header>
              <span class="header">日修改量</span>
            </template>
            <template #default="scope">
              <span class="content">{{ scope.row.dayUpdateNum }}</span>
            </template>
          </el-table-column>
          <el-table-column>
            <template #header>
              <span class="header">日删除量</span>
            </template>
            <template #default="scope">
              <span class="content">{{ scope.row.dayDeleteNum }}</span>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
    </el-tabs>

  </main>
</template>

<style scoped>
::v-deep(.el-descriptions__header){
  height: 50px;
}
.header{
  font-size: 18px;
}
.content{
  font-size: 24px;
}
</style>
